<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map</title>
    <style type="text/css">
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      /* 地图容器样式，100%填充页面 */
      #container {
        width: 100vw;
        height: 100vh;
      }
    </style>
    <!-- 1.引入百度地图WebGL依赖 -->
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ehqtXwTqZqWgYnCalEMz3eNfxVkYez3f"
    ></script>
  </head>
  <body>
    <!-- 2.地图挂载点 -->
    <div id="container"></div>
    <script>
      // 3.初始化地图实例
      // "container" 是地图容器的id，必须和div的id一致
      var map = new BMapGL.Map('container')

      // 4.设置地图中心点和缩放级别
      // 113.73, 33.62 是漯河市的经纬度
      var point = new BMapGL.Point(113.73867188921459, 33.63095537655633)
      map.centerAndZoom(point, 15)

      // 5.开启鼠标滚轮缩放功能
      map.enableScrollWheelZoom()

      // 6.设置地图的旋转角度和倾斜角度（可选）
      map.setHeading(64.5) // 地图旋转角度
      map.setTilt(73) // 地图倾斜角度

      // 8.添加点击事件，输出经纬度
      map.addEventListener('click', function (e) {
        // e.latlng 是BMapGL.Point对象
        console.log('点击位置经度：' + e.latlng.lng + ', 纬度：' + e.latlng.lat)
      })

      // 7.如需禁止地图旋转和倾斜，可用如下方式：
      // var map = new BMapGL.Map('container', {
      //   enableRotate: false,
      //   enableTilt: false,
      // })
      // 注意：如果用上面这种方式初始化地图，就不要重复new BMapGL.Map
    </script>
  </body>
</html>
